<template>
  <div class="data-mapping-container" v-loading="loading">
    <div class="panel-header1">
          <h3 class="panel-title">
          一对一映射
            <span v-if="codeId" class="code-id">ID: {{ codeId }}</span>
          </h3>
          
          <div class="panel-actions">
            <el-button type="success" size="small" icon="el-icon-view" @click="handlePreview">预览数据</el-button>

            <el-button 
            type="primary" 
             size="small" 
            icon="el-icon-document-checked" 
            @click="hadnleSaveCondtion" 
            >保存规则</el-button>

            <!-- <el-button 
              size="small" 
              icon="el-icon-document-copy"
              @click="handleCopyData"
            >
              复制数据
            </el-button> -->
          </div>
    </div>      
    <div class="mapping-content">
      <!-- 左侧字段选择区 -->
      <div class="field-selection-panel">
        <div class="panel-header">
          <h3>入库字段</h3>
          <el-tooltip content="全选/取消所有入库字段" placement="top">
            <el-checkbox 
              v-model="checkedIn" 
              @change="handleChangeCheckAll" 
              v-if="wareList.length > 0"
            >全选</el-checkbox>
          </el-tooltip>
        </div>
        
        <div class="panel-body" v-if="codeId">
          <div class="field-list">
            <el-checkbox-group v-model="checkList" @change="handleGetCheckedWare">
              <div v-for="(item,index) in wareList" :key="index" class="field-item">
                <el-checkbox 
                  :label="item.columnName" 
                  :disabled="item.columnName == 'INSTR_ID' || item.columnName == 'CODE_ID' || item.columnName == 'TULI'|| item.columnName == 'REMARK'"
                >
                  <span class="field-name">{{ item.columnName }}</span>
                </el-checkbox>
              </div>
            </el-checkbox-group>
          </div>
        </div>
        <div v-else class="empty-state">
          <i class="el-icon-s-prompt empty-icon"></i>
          <p>请在左侧选择测点</p>
        </div>
      </div>

      <!-- 右侧配置区 -->
      <div class="configuration-panel">
        <!-- 数据源配置卡片 -->
        <el-card class="config-card data-source-card" shadow="hover">
          <div slot="header" class="card-header">
            <span class="card-title"><i class="el-icon-connection"></i> 数据源配置</span>
          </div>
          
          <el-form :model="formInline" size="small" label-width="60px" class="data-source-form" inline>
                <el-form-item label="数据源">
                  <el-select 
                    v-model="formInline.dbId" 
                    placeholder="请选择数据源" 
                    @change="handleChangeDbID" style="width:180px"
                  >
                    <el-option 
                      v-for="(item,index) in wareSelectList" 
                      :key="index" 
                      :label="item.alias" 
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="模式">
                  <el-select 
                    v-model="formInline.dbSchemaId" 
                    placeholder="请选择模式" 
                    @change="handleChangeDbSchemaId"
                    :disabled="!formInline.dbId"
                    style="width:180px"
                  >
                    <el-option 
                      v-for="(item,index) in dbSchemas" 
                      :key="index" 
                      :label="item.schemaName" 
                      :value="item.schemaId"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="数据表">
                  <el-select 
                    v-model="formInline.dictTableId" 
                    placeholder="请选择数据表" 
                    @change="handleChangeDictTableID"
                    :disabled="!formInline.dbSchemaId"
                    style="width:180px"
                  >
                    <el-option 
                      v-for="(item,index) in dictSelect" 
                      :key="index" 
                      :label="item.tableName" 
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="时间列">
                  <el-select 
                    v-model="formInline.dictTimeColumnId" 
                    placeholder="请选择时间列" 
                    :disabled="!formInline.dictTableId"
                    style="width:180px"
                  >
                    <el-option 
                      v-for="(item,index) in versionColumnSelect" 
                      :key="index" 
                      :label="item.columnName" 
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
          </el-form>
          
          <!-- 条件配置区域 -->
          <div class="conditions-section">
            <div class="section-header">
              <span>过滤条件</span>
              <el-button 
                type="primary" 
                icon="el-icon-plus" 
                @click="handleAddCondtion" 
                size="mini"
                :disabled="!formInline.dictTableId"
              >添加条件</el-button>
            </div>
            
            <div class="conditions-list">
              <div v-for="(item,index) in conditions" :key="index" class="condition-item">
                <el-select 
                  v-model="item.dictColumnId" 
                  placeholder="选择字段" 
                  size="small"
                  :disabled="!formInline.dictTableId"
                  style="width: 30%"
                >
                  <el-option 
                    v-for="(item,index) in versionColumnSelect" 
                    :key="index" 
                    :label="item.columnName" 
                    :value="item.id"
                  ></el-option>
                </el-select>
                
                <el-select 
                  v-model="item.operator" 
                  placeholder="操作符" 
                  size="small" 
                  style="width: 20%; margin: 0 8px"
                  :disabled="!item.dictColumnId"
                >
                  <el-option 
                    v-for="(item,index) in dbOperator" 
                    :key="index" 
                    :label="item" 
                    :value="item"
                  ></el-option>
                </el-select>
                
                <el-input 
                  v-model="item.conditionVal" 
                  placeholder="条件值" 
                  size="small"
                  style="width: 35%"
                  :disabled="!item.operator"
                ></el-input>
                
                <el-button 
                  type="danger" 
                  icon="el-icon-delete" 
                  size="mini" 
                  @click="handleDelCondition(index)"
                  style="margin-left: 8px;padding: 6px;"
                ></el-button>
              </div>
              
              <div v-if="conditions.length === 0" class="no-conditions">
                <i class="el-icon-warning-outline"></i>
                <span>暂无过滤条件，点击"添加条件"按钮进行配置</span>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 字段映射配置卡片 -->
        <el-card class="config-card field-mapping-card" shadow="hover">
          <div slot="header" class="card-header">
            <span class="card-title"><i class="el-icon-set-up"></i> 字段映射配置</span>
            <div class="cursor-config">
              <span>采集位置：</span>
              <el-input 
                v-model="lastTimeCursor" 
                placeholder="采集位置" 
                size="small"
                style="width: 150px; margin-right: 8px"
              ></el-input>
              <el-button 
                type="primary" 
                icon="el-icon-edit" 
                @click="handleChangeIndex" 
                size="mini"
              >更新</el-button>
            </div>
          </div>
          
          <el-table 
            :data="tableList" border 
            empty-text="请先选择左侧的入库字段"
            height="calc(100vh - 640px)"
          >
            <el-table-column prop="targetColumn" label="入库字段" align="center" width="120"></el-table-column>
            
            <el-table-column label="三方字段" align="center">
              <template slot-scope="scope">
                <el-select 
                  v-model="scope.row.sourceDictColumnId" 
                  placeholder="选择映射字段" 
                  size="small" 
                  clearable 
                  :disabled="scope.row.targetColumn == 'INSTR_ID' || scope.row.targetColumn == 'CODE_ID' || scope.row.targetColumn == 'TULI' || scope.row.targetColumn == 'REMARK'"
                >
                  <el-option
                    v-for="(item,index) in versionColumnSelect"
                    :key="index" :label="item.columnName" :value="item.id"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            
            <el-table-column prop="defaultType" label="策略" align="center" width="120">
              <template slot-scope="scope">
                <el-select 
                  v-model="scope.row.defaultType" 
                  placeholder="选择策略" 
                  size="small" 
                  v-if="!scope.row.sourceDictColumnId"
                >
                  <el-option 
                    v-for="item in dbDefaultType" 
                    :key="item" 
                    :label="item" 
                    :value="item"
                  ></el-option>
                </el-select>
                <span v-else>-</span>
              </template>
            </el-table-column>
            
            <el-table-column prop="defaultVal" label="默认值" align="center" width="150">
              <template slot-scope="scope">
                <el-input 
                  v-model="scope.row.defaultVal" 
                  placeholder="默认值" 
                  size="small" 
                 :disabled="scope.row.targetColumn == 'INSTR_ID' || scope.row.targetColumn == 'CODE_ID' || scope.row.targetColumn == 'TULI' || scope.row.targetColumn == 'REMARK'"
                ></el-input>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </div>

    <!-- 预览对话框 -->
    <el-dialog 
      title="数据预览" 
      :visible.sync="previewDialogVisible" 
      width="80%"
      top="5vh"
      custom-class="preview-dialog"
    >
      <div class="preview-content">
        <el-alert
          title="预览数据仅供参考"
          type="info"
          show-icon
          :closable="false"
          style="margin-bottom: 15px"
        ></el-alert>
        
        <el-table 
          :data="dialogTableList" 
          stripe 
          border 
          height="400"
          style="width: 100%"
          v-loading="previewLoading"
        >
          <el-table-column
            v-for="column in dialogTableTitle"
            :key="column"
            :prop="column"
            :label="column"
            min-width="120"
          ></el-table-column>
        </el-table>
        
        <div class="preview-footer">
          <span class="preview-count">共 {{ dialogTableList.length }} 条记录</span>
          <el-button type="primary" size="small" @click="previewDialogVisible = false">关闭</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import {tableColumnList,PowerPointQueryById,versionTable,versionColumn,changeIndex,pointDetail,DBlist,dbConfig,pointSave,pointPreview} from "@/api/https";
export default {
    props:{
        stationId:{
            type:Number,
            default:0
        },
        codeId:{
            type:Number,
            default:0
        },
        copyCodeID:{
            type:Number,
            default:0
        },
        tabName:{
            type:String,
            default:''
        }
    },
    data() {
        return {
            formInline:{},
            conditions:[{}],
            wareSelectList:[],
            dbSchemas:[],
            activeNames: '1',
            tableList:[],
            wareList:[],
            checkList:[],
            dictSelect:[],
            versionColumnSelect:[],
            dbOperator:[],
            dbDefaultType:[],
            id:null,
            loading:false,
            previewDialogVisible:false,
            dialogTableTitle:[],
            dialogTableList:[],
            checkedIn:false,
            lastTimeCursor:'',
            previewLoading:false
        }
    },
    created(){
        dbConfig().then(res=>{
          if(res.code == 200){
            this.dbOperator = res.data.dbOperator
            this.dbDefaultType = res.data.dbDefaultType
          }
        })
    },
    watch:{
        'stationId':{
            handler(newVal,oldVal){
                this.wareList = []
                this.wareSelectList = []
                this.dictSelect = []
                this.versionColumnSelect = []
                this.conditionList = []
                this.checkList = []
                this.tableList = []
            }
        },
        'codeId':{
            handler(newVal,oldVal){
                if(this.codeId && this.tabName == '1'){
                    this.clearData()
                    this.getInWareList()
                    this.getWareSelect()
                    setTimeout(()=>{
                        this.handleGetData(false)
                    },500)
                }else{
                    this.clearData()
                    this.loading = false
                }
            }
        },
        'copyCodeID':{
            handler(newVal,oldVal){
                if(this.copyCodeID != 0 && this.copyCodeID != null && this.tabName == '1'){
                    this.clearData()
                    this.handleGetInWare()
                    this.getWareSelect()
                    setTimeout(()=>{
                        this.handleGetData(true)
                    },500)
                }else if(this.copyCodeID == null && this.tabName == '1'){
                    this.clearData()
                    this.handleGetInWare()
                    this.getWareSelect()
                    this.loading = false
                }
            }
        },
        'tabName':{
            handler(newVal,oldVal){
                if(this.codeId && this.tabName == '1'){
                    this.clearData()
                    this.handleGetInWare()
                    this.getWareSelect()
                    setTimeout(()=>{
                        this.handleGetData(false)
                    },500)
                }else{
                    this.clearData()
                    this.loading = false
                }
            }
        }
    },
    methods: {
        clearData(){
            this.loading = true
            this.wareList = []
            this.wareSelectList = []
            this.dictSelect = []
            this.formInline = {}
            this.versionColumnSelect = []
            this.conditions = [{}]
            this.checkList = []
            this.tableList = []
        },
        getInWareList(){
          tableColumnList({
              codeId:this.codeId
          }).then(res=>{
            if(res.code == 200){
                this.wareList = res.data
            }else{
                this.wareList = []
            }
          })
        },
        handleGetCheckedWare() {
          if (this.checkList.length === 0) {
              this.tableList = [];
              this.checkedIn = false;
              return;
          }

          const list = this.checkList.map(item => {
              const existingItem = this.tableList.find(f => f.targetColumn === item);
              
              return existingItem || {
                  targetColumn: item,
                  sourceDbId: this.formInline.sourceDbId || '',
                  sourceDbSchemaId: this.formInline.sourceDbSchemaId || '',
                  sourceDictTableId: this.formInline.dictTableId || '',
                  sourceDictColumnId: '',
                  defaultType: '',
                  defaultVal: ''
              };
          });
          this.tableList = [...list];
          this.checkedIn = this.checkList.length === this.wareList.length;
        },
        handleChangeCheckAll(val){
          if (val) {
              // 全选情况
              this.checkList = this.wareList.map(item => item.columnName);
          } else {
            // 部分选择情况
            this.checkList = ['INSTR_ID', 'CODE_ID', 'TULI', 'REMARK'];
            // 获取数据并设置默认值
            PowerPointQueryById({ id: this.codeId }).then(res => {
              if (res.code === 200) {
                  const { data } = res.data;
                  this.tableList = [
                      {
                          defaultType: 'DEFAULT',
                          defaultVal: data.instR_ID,
                          sourceDbId: '',
                          sourceDbSchemaId: '',
                          sourceDictColumnId: '',
                          sourceDictTableId: '0',
                          targetColumn: 'INSTR_ID',
                          uniqueIndex: ''
                      },
                      {
                          defaultType: 'DEFAULT',
                          defaultVal: data.id,
                          sourceDbId: '',
                          sourceDbSchemaId: '',
                          sourceDictColumnId: '',
                          sourceDictTableId: '0',
                          targetColumn: 'CODE_ID',
                          uniqueIndex: ''
                      },
                      {
                          defaultType: 'DEFAULT',
                          defaultVal: data.pointName,
                          sourceDbId: '',
                          sourceDbSchemaId: '',
                          sourceDictColumnId: '',
                          sourceDictTableId: '0',
                          targetColumn: 'TULI',
                          uniqueIndex: ''
                      },
                      {
                          defaultType: 'DEFAULT',
                          defaultVal: '工具抓取',
                          sourceDbId: '',
                          sourceDbSchemaId: '',
                          sourceDictColumnId: '',
                          sourceDictTableId: '0',
                          targetColumn: 'REMARK',
                          uniqueIndex: ''
                      }
                  ];
              }
            }).catch(error => {
              console.error('获取数据失败:', error);
            });
          }
          // 更新选中项
          this.handleGetCheckedWare();
        },
        handleChangeDbSchemaId(val){
            const data = {...this.formInline}
            data.dictTableId = ''
            data.dictTimeColumnId = ''
            this.formInline = {...data}
            this.conditions = [{}]
            this.versionColumnSelect = []
            this.dbSchemas.forEach(item=>{
              if(item.schemaId == val){
                versionTable({
                    dictVersionId:item.dictVersionId
                    }).then(res=>{
                    if(res.code == 200){
                        this.dictSelect = res.data
                    }else{
                        this.dictSelect = []
                    }
                })
              }
            })
        },
        handleChangeDictTableID(val){
          const data = {...this.formInline}
          data.dictTimeColumnId = ''
          this.formInline = {...data}
          this.conditions = [{}]
          this.versionColumnSelect = []
          versionColumn({
              dictTableId:val
          }).then(res=>{
              if(res.code == 200){
                  this.versionColumnSelect = res.data
              }else{
                  this.versionColumnSelect = []
              }
          })
        },
        handleAddCondtion(){
          this.conditions.push({})
        },
        handleChangeIndex(){
          changeIndex({
              codeId:this.codeId,
              lastTimeCursor:this.lastTimeCursor
          }).then(res=>{
              if(res.code == 200){
                  this.$message.success('修改成功')
              }else{
                  this.$message.error(res.msg)
              }
          })
        },
        handleGetData(isCopy) {
          const code = isCopy ? this.copyCodeID : this.codeId;
          
          pointDetail({ codeId: code })
              .then(async res => {
                  if (res.code !== 200) {
                      this.loading = false;
                      return;
                  }
                  this.id = isCopy ? null : res.data.id;
                  // 处理一对一关系数据
                  if (res.data.dbSourceTables?.length > 0 && res.data.relationType === 'one-to-one') {
                      await this.handleOneToOneData(res.data);
                  } else if (!isCopy) {
                      await this.handleDefaultData();
                  }
                  
                  this.loading = false;
              })
              .catch(error => {
                  console.error('获取数据失败:', error);
                  this.loading = false;
              });
      },

      // 处理一对一关系数据
      async handleOneToOneData(data) {
          const _d = data.dbSourceTables[0];
          this.lastTimeCursor = data.lastTimeCursor;
          this.conditions = _d.conditions || [{}];
          
          // 处理列映射
          this.tableList = data.columnMaps?.map(item => ({
              defaultType: item.defaultType,
              defaultVal: item.defaultVal,
              sourceDbId: item.sourceDbId === "0" ? '' : item.sourceDbId,
              sourceDbSchemaId: item.sourceDbSchemaId === '0' ? '' : item.sourceDbSchemaId,
              sourceDictColumnId: item.sourceDictColumnId === '0' ? '' : item.sourceDictColumnId,
              sourceDictTableId: item.sourceDictTableId === '0' ? '' : item.sourceDictTableId,
              targetColumn: item.targetColumn,
              uniqueIndex: item.uniqueIndex
          })) || [];
          
          this.checkList = data.columnMaps?.map(item => item.targetColumn) || [];
          
          // 获取数据源相关信息
          await this.fetchDataSourceInfo(_d);
          
          // 更新表单数据
          this.formInline = {
              dbId: _d.dbId || '',
              dbSchemaId: _d.dbSchemaId || '',
              dictTableId: _d.dictTableId || '',
              dictTimeColumnId: _d.dictTimeColumnId || '',
          };
          
          this.checkedIn = this.tableList.length === this.wareList.length;
      },

      // 获取数据源相关信息
      async fetchDataSourceInfo(data) {
          // 获取模式
          if (data.dbId && this.wareSelectList.length > 0) {
              const dbItem = this.wareSelectList.find(item => item.id === data.dbId);
              if (dbItem) {
                  this.dbSchemas = dbItem.dbSchemas;
              }
          }
          
          // 获取数据表
          if (data.dbSchemaId && this.dbSchemas.length > 0) {
              const schemaItem = this.dbSchemas.find(item => item.schemaId === data.dbSchemaId);
              if (schemaItem) {
                  try {
                      const res = await versionTable({ dictVersionId: schemaItem.dictVersionId });
                      this.dictSelect = res.code === 200 ? res.data : [];
                  } catch (error) {
                      console.error('获取数据表失败:', error);
                      this.dictSelect = [];
                  }
              }
          }
          
          // 获取时间列
          if (data.dictTableId) {
              try {
                  const res = await versionColumn({ dictTableId: data.dictTableId });
                  this.versionColumnSelect = res.code === 200 ? res.data : [];
              } catch (error) {
                  console.error('获取时间列失败:', error);
                  this.versionColumnSelect = [];
              }
          }
      },

      // 处理默认数据
      async handleDefaultData() {

          this.checkList = ['INSTR_ID', 'CODE_ID', 'TULI', 'REMARK'];
          
          try {
              const res = await PowerPointQueryById({ id: this.codeId });
              if (res.isSuccess) {
                  const pointData = res.data;
                  this.tableList = [
                      {
                          defaultType: 'DEFAULT',
                          defaultVal: pointData.instR_ID,
                          sourceDbId: '',
                          sourceDbSchemaId: '',
                          sourceDictColumnId: '',
                          sourceDictTableId: '0',
                          targetColumn: 'INSTR_ID',
                          uniqueIndex: ''
                      },
                      {
                          defaultType: 'DEFAULT',
                          defaultVal: pointData.id,
                          sourceDbId: '',
                          sourceDbSchemaId: '',
                          sourceDictColumnId: '',
                          sourceDictTableId: '0',
                          targetColumn: 'CODE_ID',
                          uniqueIndex: ''
                      },
                      {
                          defaultType: 'DEFAULT',
                          defaultVal: pointData.pointName,
                          sourceDbId: '',
                          sourceDbSchemaId: '',
                          sourceDictColumnId: '',
                          sourceDictTableId: '0',
                          targetColumn: 'TULI',
                          uniqueIndex: ''
                      },
                      {
                          defaultType: 'DEFAULT',
                          defaultVal: '工具抓取',
                          sourceDbId: '',
                          sourceDbSchemaId: '',
                          sourceDictColumnId: '',
                          sourceDictTableId: '0',
                          targetColumn: 'REMARK',
                          uniqueIndex: ''
                      }
                  ];
              }
          } catch (error) {
              this.$message.error('获取默认数据失败:');
          }
      },
      getWareSelect(){
        DBlist({
            basinId:'',
            stationId:this.stationId,
            page:1,
            size:500
        }).then(res=>{
          if(res.code == 200){
              this.wareSelectList = res.data.list
          }else{
              this.wareSelectList = []
          }
        })
      },
      handleChangeDbID(val){
        const data = {...this.formInline}
        data.dbSchemaId = ''
        data.dictTableId = ''
        data.dictTimeColumnId = ''
        this.formInline = {...data}
        this.dictSelect = []
        this.conditions = [{}]
        this.versionColumnSelect = []
        this.wareSelectList.forEach(item=>{
            if(item.id == val){
                this.dbSchemas = item.dbSchemas
            }
        })
      },
      handleDelCondition(index){
         this.conditions.splice(index,1)
      },

      hadnleSaveCondtion(){
            const list = []
            if(this.tableList.length > 0){
                this.tableList.forEach(item=>{
                    const d = {
                        targetColumn:item.targetColumn,
                        sourceDbId:item.sourceDictColumnId ? this.formInline.dbId : 0,
                        sourceDbSchemaId:item.sourceDictColumnId ? this.formInline.dbSchemaId : 0,
                        sourceDictTableId:item.sourceDictColumnId ? this.formInline.dictTableId : 0,
                        sourceDictColumnId:item.sourceDictColumnId || 0,
                        defaultType:item.defaultType || null,
                        defaultVal:item.defaultVal,
                        uniqueIndex:item.sourceDictColumnId ? '1' : ''
                    }
                    list.push(d)
                })
            }
            const conditions = []
            if(this.conditions.length > 0){
                this.conditions.forEach(item=>{
                    const d = {
                        conditionVal:item.conditionVal,
                        dictColumnId:item.dictColumnId || '',
                        operator:item.operator,
                    }
                    conditions.push(d)
                })
            }
            const data = {
                id:this.id || null,
                stationId:this.stationId,
                codeId:this.codeId,
                relationType:'one-to-one',
                dbSourceTables:[{
                    uniqueIndex:'1',
                    dbId:this.formInline.dbId,
                    dbSchemaId:this.formInline.dbSchemaId,
                    dictTableId:this.formInline.dictTableId,
                    dictTimeColumnId:this.formInline.dictTimeColumnId,
                    matchSeconds:0,
                    isMaster:true,
                    conditions:conditions
                }],
                columnMaps:list
            }
            pointSave(data).then(res=>{
                if(res.code == 200){
                    this.handleGetData(false)
                    this.$message.success('保存成功')
                }else{
                    this.$message.error(res.msg)
                }
            })
        },

        handlePreview(){
            pointPreview({
                codeId:this.codeId
            }).then(res=>{
                if(res.code == 200){
                  this.previewDialogVisible = true
                  this.dialogTableTitle = res.data.tableTitleList || []
                  this.dialogTableList = res.data.dataList || []
                }else{
                  this.$message.error(res.msg)
                }
            })
        },
      }
}
</script>

<style scoped lang="scss">
.data-mapping-container {
  padding: 10px;
  height: calc(100vh - 240px);
  .mapping-content {
    display: flex;
    gap: 10px;
    .field-selection-panel {
      min-width: 280px;
      height: calc(100vh - 260px);
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      
      .panel-header {
        padding: 16px;
        border-bottom: 1px solid #e6ebf5;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        h3 {
          margin: 0;
          font-size: 14px;
          color: #303133;
        }
      }
      
      .panel-body {
        height:calc(100vh - 280px);
        overflow-y: auto;
        
        .search-input {
          padding: 12px;
        }
        
        .field-list {
          flex: 1;
          overflow-y: auto;
          padding: 0 12px 12px;
          
          .field-item {
            padding: 8px 0;
            border-bottom: 1px dashed #e6ebf5;
            
            &:last-child {
              border-bottom: none;
            }
            
            .field-name {
              font-size: 13px;
            }
            
            .field-info {
              margin-left: 4px;
              color: #909399;
            }
          }
        }
      }
      
      .empty-state {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #909399;
        
        .empty-icon {
          font-size: 48px;
          margin-bottom: 12px;
        }
        
        p {
          margin: 0;
          font-size: 14px;
        }
      }
    }
    
    .configuration-panel {
      flex: 1;
      
      .config-card {
        border-radius: 4px;
        
        ::v-deep .el-card__header {
          padding: 12px 16px;
          background-color: #fafafa;
        }
        
        .card-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .card-title {
            font-weight: bold;
            color: #303133;
            
            i {
              margin-right: 6px;
              color: #409EFF;
            }
          }
        }
        
        &.data-source-card {
          .data-source-form {
            padding: 0 8px;
          }
          
          .conditions-section {
            margin-top: 16px;
            border-top: 1px solid #e6ebf5;
            padding-top: 16px;
            
            .section-header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 12px;
              font-weight: bold;
              color: #606266;
            }
            
            .conditions-list {
              .condition-item {
                display: flex;
                align-items: center;
                margin-bottom: 12px;
                padding: 8px;
                background-color: #f9fafc;
                border-radius: 4px;
              }
              
              .no-conditions {
                text-align: center;
                padding: 20px;
                color: #909399;
                background-color: #f9fafc;
                border-radius: 4px;
                
                i {
                  margin-right: 6px;
                }
              }
            }
          }
        }
        
        &.field-mapping-card {
          .cursor-config {
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #606266;
          }
          
          .mapping-table {
            ::v-deep .el-table__header-wrapper th {
              background-color: #f5f7fa;
            }
          }
        }
      }
      
      .action-bar {
        background: #fff;
        padding: 16px;
        border-radius: 4px;
        text-align: center;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      }
    }
  }
}

.preview-dialog {
  .preview-content {
    .preview-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 16px;
      
      .preview-count {
        color: #606266;
        font-size: 14px;
      }
    }
  }
}

.panel-header1 {
    padding: 16px 24px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background:#fff;
    margin: -11px 0 10px -10px;
    
    .panel-title {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
      display: flex;
      align-items: center;
      gap: 12px;
      
      .code-id {
        font-size: 12px;
        color: #64748b;
        font-weight: normal;
        background: #f1f5f9;
        padding: 2px 8px;
        border-radius: 4px;
      }
    }
    
    .panel-actions {
      display: flex;
      gap: 8px;
    }
  }

.panel-content {
    flex: 1;
    overflow: auto;
    background: #fafafa;
  }
</style>